<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>微信找车</title>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=2MTBZ-JTRRD-MHL4C-HA4JG-CD4WZ-FEFSJ"></script>
	<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=2MTBZ-JTRRD-MHL4C-HA4JG-CD4WZ-FEFSJ&libraries=drawing,geometry,autocomplete,convertor"></script>
	
<style type="text/css">
	html,body,#container,.map{
	    width:100%;
	    height:100%;
	}
	body, button, input, select, textarea {
	    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
	}
	.p {
	    margin: 0 0 1px;
	}
	.map{
		border: none;
	}
	.go{
		display: block;
	    position: absolute;
	    top: 13px;
	    width: 75px;
	    height: 34px;
	    text-align: center;
	    line-height: 60px;
	    font-size: 21px;
	    border-radius: 4px;
	    background-color: #0079ff;
	}
	.no-padding-right{
		padding-right:0!important;
	}
	.glyphicon {
		color: #ccc;
	}
	#toup {
		position: absolute;
		font-size: 30px;
    	right: 3px;
	}
</style>
</head>
<body>
	<a name="#top"></a>
	<c:choose>
		<c:when test="${stopPic!='' && stopPic!=null}"><!-- 图片显示 -->
			<div class="photo">
				<img class="a" id="a" style="width:100%;height:220px;" src="${ stopPic }"/>
				<p></p>
			</div>
			<nav class="col-xs-12 navbar navbar-default navbar-fixed-bottom area no-padding-right">
			    <div class="col-xs-10 container address center-block no-padding-right">
			        <p class="col-xs-12 text-center no-padding-right p" id="pic_time">${ lastTimeStr }</p>
			        <p class="col-xs-12 text-center no-padding-right p" id="address">${ address }</p>
			    </div>
			    <div id="hide" class="col-xs-2 text-center">
			    	<span class="glyphicon glyphicon-chevron-down"></span>
			    	<p>隐藏</p>
			    </div>
			</nav>
		</c:when>
	</c:choose>
	<c:choose>
		<c:when test="${latlng!='' && latlng!=null}"><!-- 地图显示 -->
			<iframe class="map" src="${ maplink }"></iframe>
			<!-- <div id="container"></div>  -->
		</c:when>
	</c:choose>
	<c:choose>
		<c:when test="${(latlng=='' || latlng==null) && (stopPic=='' || stopPic==null)}"><!-- 地图显示 -->
			<center><h5>位置信息无法获取，请检查终端GPS网络</h5></center>
		</c:when>
	</c:choose>
	<span id="toup" class="glyphicon glyphicon-circle-arrow-up" onclick="javascript:scroll(0,0)"></span>
</body>
<script>

	$("#hide").click(function(){
		$("nav").addClass("hide");
	})
	
	var clientHeight = document.body.clientHeight;//网页可见区域高
	var scrollHeight = document.body.scrollHeight;//网页正文全文高
	var scrollTop = document.body.scrollTop;//网页被卷去的高(IE7无效)
	if(scrollHeight-200 > clientHeight){
		$("#toup").attr("style", "top:"+(scrollHeight-30)+"px");
	}else{
		$("#toup").addClass("hide");
	}
	//alert(clientHeight+"  "+scrollHeight+"   "+scrollTop);
	
</script>
</html>